<template>
  <div id="screenfull">
    <div v-if="isFullscreen" @click="click">
      <svg class="icon" aria-hidden="true" font-size="40px">
        <use xlink:href="#iconshiliangzhinengduixiang1"></use>
      </svg>
    </div>

    <div v-else @click="click">
      <svg class="icon" aria-hidden="true" font-size="40px">
        <use xlink:href="#iconshiliangzhinengduixiang1"></use>
      </svg>
    </div>
  </div>
</template>

<script setup lang="ts">
import screenfull from 'screenfull'
import { onBeforeUnmount, onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus'

const isFullscreen = ref<boolean>(false)

const click = async () => {
  if (!screenfull.isEnabled) {
    ElMessage({
      message: 'your browser can not work',
      type: 'warning'
    })
  }
  screenfull.toggle()
}

const change = () => {
  if (screenfull.isEnabled) {
    isFullscreen.value = screenfull.isFullscreen
  }
}

onMounted(() => {
  if (screenfull.isEnabled) {
    screenfull.on('change', change)
  }
})

onBeforeUnmount(() => {
  if (screenfull.isEnabled) {
    screenfull.off('change', change)
  }
})
</script>

<style scoped lang="scss">
</style>
